<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			background-image: url(images/bg.jpg);
			background-size: 100% 100%;
		}
		/*视频*/
		.videoModify{
			padding: 20px;
			background-color: #fff;
			box-sizing: border-box;
			position: absolute;
			opacity: 0.97;
			z-index: 9999;
			border: 3px solid #2464b5;
		}
		.videoModify>p{
			display: inline-block;
			width: 100%;
			position: relative;
		}
		.videoModify>p span{
			display: inline-block;
			float: right;
			color: #bbb;
			position: absolute;
			bottom: 0px;
			right: 0px;
			cursor: pointer;
		}
		.videoModify>p span:hover{
			color: red;
		}
		.videoModify table{
			margin: 20px auto;
		}
		.videoModify table tr td:nth-of-type(1){
			text-align: right;
		}
		#file{
			display: none;
		}
		.videoModify form p{
			text-align: right;
		}
		.videoModify form p input{
			background-color:#ccc;
			color: #2464b5;
			font-weight: bold;
			box-sizing: border-box;
			margin-right:10px;
		}
		.videoModify form p input:hover{
			background-color:#2464b5;
			color: #fff;
		}			
	</style>
</head>
<body>
	<div class="box">
		<!-- 视频修改 -->
		<div class="videoModify">
			<p>
				修改视频
				<span onclick="tobghome()">×</span>
			</p>
			<form action="">
				<table>						
						<tr>
							<td>主题:</td>
							<td><input type="text"></td>
						</tr>
						<tr>
							<td>正文:</td>
							<td><textarea name=""></textarea></td>
						</tr>
						<tr>
							<td>时间:</td>
							<td><input type="text"></td>
						</tr>
						<tr class="fileTr">
							<td>视频:</td>
							<td>
								<input type="file" name="" id="file" onchange="showPic(this)">
								<img src="images/add.jpg" id="addImg" onclick="fileClick(this)">
							</td>	
						</tr>
						<tr>
							<td>视频类型:</td>
							<td>
								<select name="type">
										<option value="0" selected>-请选择-</option>
										<option value="1">其他</option>
										<option value="2">不止篮球</option>
										<option value="3">NBA休赛观察期</option>
								</select>
							</td>	
						</tr>			
				</table>
				<p class="submitP">
					<input type="button" name="" value="取消" onclick="tobghome()">
					<input type="submit" name="" value="确定">
				</p>
			</form>	
		</div>		
		
	</div>
</body>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/bghome.js"></script>
<script type="text/javascript">
	function $$(id){
		return document.getElementById(id);
	}
	function fileClick(o){
		o.previousElementSibling.click();
	}
	
	function showPic(obj) {
        var fileUrl = getObjectURL(obj.files[0]);

		console.log(fileUrl);
        if (fileUrl != null) {
            obj.nextElementSibling.src = fileUrl;
            
        }else{
        	 obj.nextElementSibling.src="images/add.jpg"
        }
    }
    //建立一个可存取到该file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) {   // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {        // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {  // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url;

      }
    function tobghome(){
		window.location.href="/nba/SearchServlet.do"
	}
</script>
</html>